<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .bgc{
            width: 200px;
            height: 100px;
            background-color: red;
            border: 2px yellow solid;
        }
        .firt{
            background-color: #008CFF;
            border: 1px red solid;
        }
        .two{
            width: 200px;
            height: 100px;
            background-color: rebeccapurple;
            border: 1px solid black;
        }


    </style>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script>
        $(function (){
           // 1、添加类 addCalss(类名);
           $('#addClass').click(function (){
               //给id为div1的元素添加类
               //添加单个类
               // $('.bgc').addClass('firt ');
               //添加多个类
               $('.bgc').addClass('firt  two');
               let l=$("")
           });

        //   移除类
            $('#removeClass').click(function (){
               // 移除单个类
               // $('.bgc').removeClass('firt');
               //移除多个类
                $('.bgc').removeClass('firt two')
            });
        //    判断类
            $('#hasClass').click(function (){
                //判断一个元素有没有某个类，如果有就返回true，如果没有就返回false
                console.log($('.bgc').hasClass('firt'));
            });
        //切换类
            $('#toggleClass').click(function (){
                //如果元素有某个类就移除这个类，如果元素没有这个类就添加这个类
                $('.bgc').toggleClass('two');
            })
        });
    </script>
</head>
<body>
<input type="button" value="添加类" id="addClass">
<input type="button" value="移除类" id="removeClass">
<input type="button" value="判断类" id="hasClass">
<input type="button" value="切换类" id="toggleClass">
<div class="bgc">div1</div>

</body>
</html>